<template>
  <div class="ships-view">
    <!-- 舰队概览 -->
    <div class="fleet-overview">
      <h2 class="section-title">
        <span class="title-icon">🚀</span>
        舰队概览
      </h2>
      
      <div class="overview-stats">
        <StatCard
          title="总舰船数量"
          :value="totalShips"
          icon="🚀"
          color="#00d4ff"
        />
        <StatCard
          title="舰队数量"
          :value="totalFleets"
          icon="⚡"
          color="#00ff88"
        />
        <StatCard
          title="总战力"
          :value="formatNumber(totalPower)"
          icon="⚔️"
          color="#ff6b6b"
        />
        <StatCard
          title="维护费用"
          :value="formatNumber(totalMaintenance)"
          icon="💰"
          color="#f59e0b"
        />
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 标签页导航 -->
        <div class="tab-nav">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            class="tab-btn"
            :class="{ active: activeTab === tab.id }"
            @click="activeTab = tab.id"
          >
            <span class="tab-icon">{{ tab.icon }}</span>
            <span class="tab-label">{{ tab.label }}</span>
          </button>
        </div>

        <!-- 舰队列表 -->
        <div v-if="activeTab === 'fleets'" class="fleets-section">
          <div class="section-header">
            <h3>舰队列表</h3>
            <button class="create-btn" @click="showCreateFleetModal = true">
              <span class="btn-icon">➕</span>
              创建舰队
            </button>
          </div>

          <div class="fleets-list">
            <div
              v-for="fleet in fleets"
              :key="fleet.id"
              class="fleet-item"
              :class="{ selected: selectedFleet?.id === fleet.id }"
              @click="selectFleet(fleet)"
            >
              <div class="fleet-header">
                <div class="fleet-name">{{ fleet.name }}</div>
                <div class="fleet-status" :class="fleet.status">
                  {{ getFleetStatusText(fleet.status) }}
                </div>
              </div>
              <div class="fleet-info">
                <div class="fleet-ships">{{ fleet.ships.length }} 艘舰船</div>
                <div class="fleet-power">战力: {{ formatNumber(fleet.power) }}</div>
              </div>
              <div class="fleet-location">
                <span class="location-icon">📍</span>
                {{ fleet.location }}
              </div>
            </div>
          </div>
        </div>

        <!-- 舰船设计 -->
        <div v-if="activeTab === 'designs'" class="designs-section">
          <div class="section-header">
            <h3>舰船设计</h3>
            <button class="create-btn" @click="showDesignModal = true">
              <span class="btn-icon">🎨</span>
              新设计
            </button>
          </div>

          <div class="designs-list">
            <div
              v-for="design in shipDesigns"
              :key="design.id"
              class="design-item"
              :class="{ selected: selectedDesign?.id === design.id }"
              @click="selectDesign(design)"
            >
              <div class="design-header">
                <div class="design-name">{{ design.name }}</div>
                <div class="design-class">{{ getShipClassName(design.class) }}</div>
              </div>
              <div class="design-stats">
                <div class="stat-item">
                  <span class="stat-icon">⚔️</span>
                  <span class="stat-value">{{ design.attack }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">🛡️</span>
                  <span class="stat-value">{{ design.defense }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">⚡</span>
                  <span class="stat-value">{{ design.speed }}</span>
                </div>
              </div>
              <div class="design-cost">
                建造成本: {{ formatNumber(design.cost) }}
              </div>
            </div>
          </div>
        </div>

        <!-- 建造队列 -->
        <div v-if="activeTab === 'construction'" class="construction-section">
          <div class="section-header">
            <h3>建造队列</h3>
            <div class="queue-info">
              {{ constructionQueue.length }} 项任务
            </div>
          </div>

          <div class="construction-queue">
            <div
              v-for="(item, index) in constructionQueue"
              :key="item.id"
              class="queue-item"
            >
              <div class="item-info">
                <div class="item-name">{{ item.shipName }}</div>
                <div class="item-location">{{ item.location }}</div>
              </div>
              <div class="item-progress">
                <div class="progress-bar">
                  <div 
                    class="progress-fill"
                    :style="{ width: `${item.progress}%` }"
                  ></div>
                </div>
                <div class="progress-text">{{ item.progress }}%</div>
              </div>
              <div class="item-time">
                剩余: {{ formatTime(item.remainingTime) }}
              </div>
              <button 
                class="cancel-btn"
                @click="cancelConstruction(index)"
                title="取消建造"
              >
                ❌
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧详情面板 -->
      <div class="right-panel">
        <!-- 舰队详情 -->
        <div v-if="activeTab === 'fleets' && selectedFleet" class="fleet-details">
          <div class="details-header">
            <h3>{{ selectedFleet.name }}</h3>
            <div class="fleet-actions">
              <button class="action-btn" @click="editFleet(selectedFleet)">
                <span class="btn-icon">✏️</span>
                编辑
              </button>
              <button class="action-btn" @click="moveFleet(selectedFleet)">
                <span class="btn-icon">🎯</span>
                移动
              </button>
              <button class="action-btn danger" @click="disbandFleet(selectedFleet)">
                <span class="btn-icon">💥</span>
                解散
              </button>
            </div>
          </div>

          <div class="fleet-stats">
            <div class="stat-card">
              <div class="stat-title">总战力</div>
              <div class="stat-value">{{ formatNumber(selectedFleet.power) }}</div>
            </div>
            <div class="stat-card">
              <div class="stat-title">移动速度</div>
              <div class="stat-value">{{ selectedFleet.speed }}</div>
            </div>
            <div class="stat-card">
              <div class="stat-title">维护费用</div>
              <div class="stat-value">{{ formatNumber(selectedFleet.maintenance) }}</div>
            </div>
          </div>

          <div class="fleet-ships">
            <h4>舰船组成</h4>
            <div class="ships-list">
              <div
                v-for="ship in selectedFleet.ships"
                :key="ship.id"
                class="ship-item"
              >
                <div class="ship-icon">{{ getShipIcon(ship.class) }}</div>
                <div class="ship-info">
                  <div class="ship-name">{{ ship.name }}</div>
                  <div class="ship-class">{{ getShipClassName(ship.class) }}</div>
                </div>
                <div class="ship-stats">
                  <div class="ship-health">
                    <div class="health-bar">
                      <div 
                        class="health-fill"
                        :style="{ width: `${ship.health}%` }"
                      ></div>
                    </div>
                    <div class="health-text">{{ ship.health }}%</div>
                  </div>
                </div>
                <button 
                  class="remove-btn"
                  @click="removeShipFromFleet(ship.id)"
                  title="移除舰船"
                >
                  ➖
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 设计详情 -->
        <div v-if="activeTab === 'designs' && selectedDesign" class="design-details">
          <div class="details-header">
            <h3>{{ selectedDesign.name }}</h3>
            <div class="design-actions">
              <button class="action-btn" @click="editDesign(selectedDesign)">
                <span class="btn-icon">✏️</span>
                编辑
              </button>
              <button class="action-btn" @click="buildShip(selectedDesign)">
                <span class="btn-icon">🔨</span>
                建造
              </button>
              <button class="action-btn danger" @click="deleteDesign(selectedDesign)">
                <span class="btn-icon">🗑️</span>
                删除
              </button>
            </div>
          </div>

          <div class="design-info">
            <div class="info-section">
              <h4>基本信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">舰船类型:</span>
                  <span class="info-value">{{ getShipClassName(selectedDesign.class) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">船体大小:</span>
                  <span class="info-value">{{ selectedDesign.hullSize }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">建造时间:</span>
                  <span class="info-value">{{ formatTime(selectedDesign.buildTime) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">维护费用:</span>
                  <span class="info-value">{{ formatNumber(selectedDesign.maintenance) }}</span>
                </div>
              </div>
            </div>

            <div class="info-section">
              <h4>战斗属性</h4>
              <div class="combat-stats">
                <div class="combat-stat">
                  <div class="stat-label">攻击力</div>
                  <div class="stat-bar">
                    <div 
                      class="stat-fill attack"
                      :style="{ width: `${(selectedDesign.attack / 100) * 100}%` }"
                    ></div>
                  </div>
                  <div class="stat-number">{{ selectedDesign.attack }}</div>
                </div>
                <div class="combat-stat">
                  <div class="stat-label">防御力</div>
                  <div class="stat-bar">
                    <div 
                      class="stat-fill defense"
                      :style="{ width: `${(selectedDesign.defense / 100) * 100}%` }"
                    ></div>
                  </div>
                  <div class="stat-number">{{ selectedDesign.defense }}</div>
                </div>
                <div class="combat-stat">
                  <div class="stat-label">速度</div>
                  <div class="stat-bar">
                    <div 
                      class="stat-fill speed"
                      :style="{ width: `${(selectedDesign.speed / 10) * 100}%` }"
                    ></div>
                  </div>
                  <div class="stat-number">{{ selectedDesign.speed }}</div>
                </div>
              </div>
            </div>

            <div class="info-section">
              <h4>组件配置</h4>
              <div class="components-list">
                <div
                  v-for="component in selectedDesign.components"
                  :key="component.id"
                  class="component-item"
                >
                  <div class="component-icon">{{ getComponentIcon(component.type) }}</div>
                  <div class="component-info">
                    <div class="component-name">{{ component.name }}</div>
                    <div class="component-type">{{ getComponentTypeName(component.type) }}</div>
                  </div>
                  <div class="component-stats">
                    <div class="component-effect">{{ formatComponentEffect(component) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 建造详情 -->
        <div v-if="activeTab === 'construction'" class="construction-details">
          <div class="details-header">
            <h3>建造管理</h3>
          </div>

          <div class="construction-info">
            <div class="info-section">
              <h4>建造能力</h4>
              <div class="capacity-info">
                <div class="capacity-item">
                  <span class="capacity-label">造船厂数量:</span>
                  <span class="capacity-value">{{ shipyards.length }}</span>
                </div>
                <div class="capacity-item">
                  <span class="capacity-label">总建造槽位:</span>
                  <span class="capacity-value">{{ totalBuildSlots }}</span>
                </div>
                <div class="capacity-item">
                  <span class="capacity-label">已使用槽位:</span>
                  <span class="capacity-value">{{ usedBuildSlots }}</span>
                </div>
              </div>
            </div>

            <div class="info-section">
              <h4>造船厂列表</h4>
              <div class="shipyards-list">
                <div
                  v-for="shipyard in shipyards"
                  :key="shipyard.id"
                  class="shipyard-item"
                >
                  <div class="shipyard-info">
                    <div class="shipyard-name">{{ shipyard.name }}</div>
                    <div class="shipyard-location">{{ shipyard.location }}</div>
                  </div>
                  <div class="shipyard-capacity">
                    <div class="capacity-text">
                      {{ shipyard.usedSlots }} / {{ shipyard.totalSlots }} 槽位
                    </div>
                    <div class="capacity-bar">
                      <div 
                        class="capacity-fill"
                        :style="{ width: `${(shipyard.usedSlots / shipyard.totalSlots) * 100}%` }"
                      ></div>
                    </div>
                  </div>
                  <div class="shipyard-efficiency">
                    效率: {{ shipyard.efficiency }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <!-- 创建舰队模态框 -->
    <div v-if="showCreateFleetModal" class="modal-overlay" @click="showCreateFleetModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>创建新舰队</h3>
          <button class="close-btn" @click="showCreateFleetModal = false">✕</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>舰队名称:</label>
            <input v-model="newFleetName" type="text" placeholder="输入舰队名称">
          </div>
          <div class="form-group">
            <label>初始位置:</label>
            <select v-model="newFleetLocation">
              <option value="">选择位置</option>
              <option v-for="system in availableSystems" :key="system.id" :value="system.name">
                {{ system.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="showCreateFleetModal = false">取消</button>
          <button class="confirm-btn" @click="createFleet" :disabled="!canCreateFleet">创建</button>
        </div>
      </div>
    </div>

    <!-- 舰船设计模态框 -->
    <div v-if="showDesignModal" class="modal-overlay" @click="showDesignModal = false">
      <div class="modal-content large" @click.stop>
        <div class="modal-header">
          <h3>舰船设计器</h3>
          <button class="close-btn" @click="showDesignModal = false">✕</button>
        </div>
        <div class="modal-body">
          <p class="placeholder-text">舰船设计器功能正在开发中...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useShipsStore, useResourcesStore } from '@/stores'
import StatCard from '@/components/ui/StatCard.vue'

// 接口定义
interface Fleet {
  id: string
  name: string
  ships: Ship[]
  location: string
  status: 'idle' | 'moving' | 'combat' | 'patrol'
  power: number
  speed: number
  maintenance: number
}

interface Ship {
  id: string
  name: string
  class: string
  health: number
  attack: number
  defense: number
  speed: number
}

interface ShipDesign {
  id: string
  name: string
  class: string
  hullSize: string
  attack: number
  defense: number
  speed: number
  cost: number
  buildTime: number
  maintenance: number
  components: Component[]
}

interface Component {
  id: string
  name: string
  type: string
  effect: string
  value: number
}

interface ConstructionItem {
  id: string
  shipName: string
  location: string
  progress: number
  remainingTime: number
}

interface Shipyard {
  id: string
  name: string
  location: string
  totalSlots: number
  usedSlots: number
  efficiency: number
}

// 响应式数据
const shipsStore = useShipsStore()
const resourcesStore = useResourcesStore()

const activeTab = ref('fleets')
const selectedFleet = ref<Fleet | null>(null)
const selectedDesign = ref<ShipDesign | null>(null)
const showCreateFleetModal = ref(false)
const showDesignModal = ref(false)
const newFleetName = ref('')
const newFleetLocation = ref('')

// 标签页配置
const tabs = [
  { id: 'fleets', label: '舰队管理', icon: '🚀' },
  { id: 'designs', label: '舰船设计', icon: '🎨' },
  { id: 'construction', label: '建造队列', icon: '🔨' }
]

// 模拟数据
const fleets = ref<Fleet[]>([
  {
    id: '1',
    name: '第一舰队',
    ships: [
      { id: '1', name: '旗舰号', class: 'battleship', health: 100, attack: 80, defense: 70, speed: 5 },
      { id: '2', name: '护卫舰A', class: 'frigate', health: 85, attack: 30, defense: 25, speed: 8 }
    ],
    location: '太阳系',
    status: 'idle',
    power: 1250,
    speed: 5,
    maintenance: 150
  },
  {
    id: '2',
    name: '探索舰队',
    ships: [
      { id: '3', name: '探索者号', class: 'explorer', health: 100, attack: 20, defense: 30, speed: 10 }
    ],
    location: '半人马座α',
    status: 'patrol',
    power: 450,
    speed: 10,
    maintenance: 75
  }
])

const shipDesigns = ref<ShipDesign[]>([
  {
    id: '1',
    name: '标准战列舰',
    class: 'battleship',
    hullSize: '大型',
    attack: 80,
    defense: 70,
    speed: 5,
    cost: 5000,
    buildTime: 3600,
    maintenance: 100,
    components: [
      { id: '1', name: '重型激光炮', type: 'weapon', effect: 'attack', value: 50 },
      { id: '2', name: '装甲板', type: 'defense', effect: 'defense', value: 40 }
    ]
  },
  {
    id: '2',
    name: '快速护卫舰',
    class: 'frigate',
    hullSize: '小型',
    attack: 30,
    defense: 25,
    speed: 8,
    cost: 1500,
    buildTime: 1200,
    maintenance: 50,
    components: [
      { id: '3', name: '轻型激光炮', type: 'weapon', effect: 'attack', value: 20 },
      { id: '4', name: '推进器', type: 'engine', effect: 'speed', value: 3 }
    ]
  }
])

const constructionQueue = ref<ConstructionItem[]>([
  {
    id: '1',
    shipName: '标准战列舰',
    location: '地球造船厂',
    progress: 65,
    remainingTime: 1260
  },
  {
    id: '2',
    shipName: '快速护卫舰',
    location: '火星造船厂',
    progress: 30,
    remainingTime: 840
  }
])

const shipyards = ref<Shipyard[]>([
  {
    id: '1',
    name: '地球造船厂',
    location: '地球轨道',
    totalSlots: 5,
    usedSlots: 2,
    efficiency: 100
  },
  {
    id: '2',
    name: '火星造船厂',
    location: '火星轨道',
    totalSlots: 3,
    usedSlots: 1,
    efficiency: 85
  }
])

const availableSystems = ref([
  { id: '1', name: '太阳系' },
  { id: '2', name: '半人马座α' },
  { id: '3', name: '天狼星' }
])

// 计算属性
const totalShips = computed(() => {
  return fleets.value.reduce((total, fleet) => total + fleet.ships.length, 0)
})

const totalFleets = computed(() => fleets.value.length)

const totalPower = computed(() => {
  return fleets.value.reduce((total, fleet) => total + fleet.power, 0)
})

const totalMaintenance = computed(() => {
  return fleets.value.reduce((total, fleet) => total + fleet.maintenance, 0)
})

const totalBuildSlots = computed(() => {
  return shipyards.value.reduce((total, yard) => total + yard.totalSlots, 0)
})

const usedBuildSlots = computed(() => {
  return shipyards.value.reduce((total, yard) => total + yard.usedSlots, 0)
})

const canCreateFleet = computed(() => {
  return newFleetName.value.trim() !== '' && newFleetLocation.value !== ''
})

// 方法
function selectFleet(fleet: Fleet) {
  selectedFleet.value = fleet
}

function selectDesign(design: ShipDesign) {
  selectedDesign.value = design
}

function getFleetStatusText(status: string): string {
  const statusMap: Record<string, string> = {
    idle: '待命',
    moving: '移动中',
    combat: '战斗中',
    patrol: '巡逻中'
  }
  return statusMap[status] || status
}

function getShipClassName(shipClass: string): string {
  const classMap: Record<string, string> = {
    battleship: '战列舰',
    cruiser: '巡洋舰',
    frigate: '护卫舰',
    destroyer: '驱逐舰',
    explorer: '探索舰',
    transport: '运输舰'
  }
  return classMap[shipClass] || shipClass
}

function getShipIcon(shipClass: string): string {
  const iconMap: Record<string, string> = {
    battleship: '🚢',
    cruiser: '🛳️',
    frigate: '⛵',
    destroyer: '🚤',
    explorer: '🛸',
    transport: '🚚'
  }
  return iconMap[shipClass] || '🚀'
}

function getComponentIcon(type: string): string {
  const iconMap: Record<string, string> = {
    weapon: '⚔️',
    defense: '🛡️',
    engine: '⚡',
    sensor: '📡',
    utility: '🔧'
  }
  return iconMap[type] || '⚙️'
}

function getComponentTypeName(type: string): string {
  const typeMap: Record<string, string> = {
    weapon: '武器系统',
    defense: '防御系统',
    engine: '推进系统',
    sensor: '传感器',
    utility: '辅助系统'
  }
  return typeMap[type] || type
}

function formatComponentEffect(component: Component): string {
  const effectMap: Record<string, string> = {
    attack: '攻击力',
    defense: '防御力',
    speed: '速度',
    range: '射程',
    accuracy: '精度'
  }
  const effectName = effectMap[component.effect] || component.effect
  return `${effectName} +${component.value}`
}

function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatTime(seconds: number): string {
  if (seconds < 60) return `${seconds}秒`
  if (seconds < 3600) return `${Math.floor(seconds / 60)}分钟`
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}小时`
  return `${Math.floor(seconds / 86400)}天`
}

function createFleet() {
  const newFleet: Fleet = {
    id: Date.now().toString(),
    name: newFleetName.value,
    ships: [],
    location: newFleetLocation.value,
    status: 'idle',
    power: 0,
    speed: 0,
    maintenance: 0
  }
  
  fleets.value.push(newFleet)
  selectedFleet.value = newFleet
  
  // 重置表单
  newFleetName.value = ''
  newFleetLocation.value = ''
  showCreateFleetModal.value = false
}

function editFleet(fleet: Fleet) {
  console.log('编辑舰队:', fleet.name)
}

function moveFleet(fleet: Fleet) {
  console.log('移动舰队:', fleet.name)
}

function disbandFleet(fleet: Fleet) {
  const index = fleets.value.findIndex(f => f.id === fleet.id)
  if (index !== -1) {
    fleets.value.splice(index, 1)
    if (selectedFleet.value?.id === fleet.id) {
      selectedFleet.value = null
    }
  }
}

function removeShipFromFleet(shipId: string) {
  if (selectedFleet.value) {
    const index = selectedFleet.value.ships.findIndex(s => s.id === shipId)
    if (index !== -1) {
      selectedFleet.value.ships.splice(index, 1)
    }
  }
}

function editDesign(design: ShipDesign) {
  console.log('编辑设计:', design.name)
}

function buildShip(design: ShipDesign) {
  console.log('建造舰船:', design.name)
}

function deleteDesign(design: ShipDesign) {
  const index = shipDesigns.value.findIndex(d => d.id === design.id)
  if (index !== -1) {
    shipDesigns.value.splice(index, 1)
    if (selectedDesign.value?.id === design.id) {
      selectedDesign.value = null
    }
  }
}

function cancelConstruction(index: number) {
  constructionQueue.value.splice(index, 1)
}

onMounted(() => {
  // 初始化时选择第一个舰队
  if (fleets.value.length > 0) {
    selectedFleet.value = fleets.value[0]
  }
  
  // 初始化时选择第一个设计
  if (shipDesigns.value.length > 0) {
    selectedDesign.value = shipDesigns.value[0]
  }
})
</script>

<style scoped>
.ships-view {
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.fleet-overview {
  margin-bottom: 2rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
}

.title-icon {
  font-size: 1.75rem;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-height: 600px;
}

.left-panel,
.right-panel {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
}

.tab-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.tab-btn.active {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #000000;
  border-color: #00d4ff;
}

.tab-icon {
  font-size: 1rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.create-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  color: #000000;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-btn:hover {
  background: linear-gradient(135deg, #00cc6a, #009954);
  transform: translateY(-1px);
}

.fleets-list,
.designs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

.fleet-item,
.design-item {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fleet-item:hover,
.design-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #00d4ff;
}

.fleet-item.selected,
.design-item.selected {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

.fleet-header,
.design-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.fleet-name,
.design-name {
  font-weight: 600;
  color: #ffffff;
}

.fleet-status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.fleet-status.idle {
  background: rgba(128, 128, 128, 0.3);
  color: #cccccc;
}

.fleet-status.moving {
  background: rgba(0, 212, 255, 0.3);
  color: #00d4ff;
}

.fleet-status.combat {
  background: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.fleet-status.patrol {
  background: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.design-class {
  color: #00d4ff;
  font-size: 0.875rem;
}

.fleet-info,
.design-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #cccccc;
}

.design-stats {
  justify-content: space-between;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-icon {
  font-size: 1rem;
}

.fleet-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #888888;
}

.design-cost {
  font-size: 0.875rem;
  color: #f59e0b;
}

.construction-queue {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.item-location {
  font-size: 0.875rem;
  color: #cccccc;
}

.item-progress {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.875rem;
  color: #00d4ff;
  font-weight: 500;
  min-width: 40px;
}

.item-time {
  font-size: 0.875rem;
  color: #f59e0b;
  min-width: 80px;
}

.cancel-btn {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 4px;
  padding: 0.25rem;
  color: #ff6b6b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn:hover {
  background: rgba(255, 107, 107, 0.3);
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.details-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.5rem;
}

.fleet-actions,
.design-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.action-btn.danger {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.action-btn.danger:hover {
  background: rgba(255, 107, 107, 0.3);
}

.fleet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}

.stat-title {
  font-size: 0.875rem;
  color: #cccccc;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #00d4ff;
}

.fleet-ships h4 {
  margin: 0 0 1rem 0;
  color: #ffffff;
}

.ships-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ship-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.ship-icon {
  font-size: 1.5rem;
  min-width: 30px;
}

.ship-info {
  flex: 1;
}

.ship-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.ship-class {
  font-size: 0.875rem;
  color: #cccccc;
}

.ship-stats {
  flex: 1;
}

.ship-health {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.health-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #00ff88);
  transition: width 0.3s ease;
}

.health-text {
  font-size: 0.875rem;
  color: #00ff88;
  min-width: 40px;
}

.remove-btn {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 4px;
  padding: 0.25rem;
  color: #ff6b6b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.remove-btn:hover {
  background: rgba(255, 107, 107, 0.3);
}

.design-details {
  max-height: 600px;
  overflow-y: auto;
}

.info-section {
  margin-bottom: 1.5rem;
}

.info-section h4 {
  margin: 0 0 1rem 0;
  color: #ffffff;
  font-size: 1.125rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.info-label {
  color: #cccccc;
}

.info-value {
  color: #ffffff;
  font-weight: 500;
}

.combat-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.combat-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-label {
  min-width: 60px;
  color: #cccccc;
  font-size: 0.875rem;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.stat-fill.attack {
  background: linear-gradient(90deg, #ff6b6b, #ff4444);
}

.stat-fill.defense {
  background: linear-gradient(90deg, #00d4ff, #0099cc);
}

.stat-fill.speed {
  background: linear-gradient(90deg, #00ff88, #00cc6a);
}

.stat-number {
  min-width: 40px;
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}

.components-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.component-icon {
  font-size: 1.25rem;
  min-width: 25px;
}

.component-info {
  flex: 1;
}

.component-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.component-type {
  font-size: 0.875rem;
  color: #cccccc;
}

.component-effect {
  color: #00ff88;
  font-weight: 500;
}

.capacity-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.capacity-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.capacity-label {
  color: #cccccc;
}

.capacity-value {
  color: #ffffff;
  font-weight: 500;
}

.shipyards-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shipyard-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.shipyard-info {
  flex: 1;
}

.shipyard-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.shipyard-location {
  font-size: 0.875rem;
  color: #cccccc;
}

.shipyard-capacity {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.capacity-text {
  font-size: 0.875rem;
  color: #cccccc;
}

.capacity-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.capacity-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, #00ff88);
  transition: width 0.3s ease;
}

.shipyard-efficiency {
  font-size: 0.875rem;
  color: #f59e0b;
  font-weight: 500;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0;
  min-width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
}

.modal-content.large {
  min-width: 600px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.close-btn {
  background: none;
  border: none;
  color: #cccccc;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #cccccc;
  font-weight: 500;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cancel-btn,
.confirm-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #cccccc;
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.confirm-btn {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #000000;
}

.confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0099cc, #007399);
}

.confirm-btn:disabled {
  background: rgba(128, 128, 128, 0.3);
  color: #888888;
  cursor: not-allowed;
}

.placeholder-text {
  text-align: center;
  color: #888888;
  font-style: italic;
  padding: 2rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ships-view {
    padding: 0.5rem;
  }
  
  .overview-stats {
    grid-template-columns: 1fr;
  }
  
  .tab-nav {
    flex-direction: column;
  }
  
  .fleet-stats {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    min-width: 300px;
    margin: 1rem;
  }
}
</style>